<!DOCTYPE html>
<html lang="en">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/local.css" />
		<script type="text/javascript" src="../script/jquery.js"></script>
		<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script src="../script/vant.min.js"></script>
		<script type="text/javascript" src="../script/fastclick.js"></script>
		<script type="text/javascript" src="../script/base.js"></script>
		<style>
			.row {

				background: #fff;
			}

			.ye {
				padding: 20px 15px;
				color: #9e9e9e;
				font-size: 14px;
				background: #fff;
				border-bottom: 1px solid #ebedf0;

			}


			.icon-t {
				padding: 20px 15px;
			}

			.icon-t img {
				width: 40px;
				height: 40px;
			}

			.l {
				padding: 15px 10px 15px 0;
				border-bottom: 1px solid #ebedf0;
			}

			.r {
				font-size: 15px;
				line-height: 22px;
			}

			.d {
				font-size: 13px;
				color: #9e9e9e;
			}

			.m {
				padding: 5px 10px 15px 10px;
				font-size: 20px;
			}
		</style>

	</head>

	<body>
		<div id="app" v-cloak>
			<div class="init-full">
				<van-nav-bar class="head" title="交易记录" left-arrow @click-left="onClickLeft">
					<div slot="right" class="head-right">
						<span @click="rechargeBalance">充值</span>
					</div>
				</van-nav-bar>
				<div class="body-with-bottom">
					<div class="content">
						<div class="ye">
							当前余额：<span class="m">￥{{balance}}</span>
						</div>
						<div>
							<div class="row flex-box" v-for="(row,index) in dataList">
								<div class="icon-t"><img :src="'../image/transaction/' + row.TradeType + '.png'" />
								</div>
								<div class="flex-main l">
									<div class="flex-box">
										<div class="flex-main">
											<div class="r">{{row.Remark}}</div>
											<div class="d">{{row.TradeDate.replace(/T/g,' ').split('.')[0]}}</div>
										</div>
										<div class="m">{{row.Income?'+':'-'}}{{row.Income || row.Expenses}}</div>
									</div>
								</div>
							</div>
						</div>


					</div>
					<van-loading v-if="showLoading" />
				</div>
			</div>
		</div>
	</body>

	<!-- 调用 uniapp webview 的 api ，记得需要写在 body 标签下面 -->
	<script src="../../../assets/script/uni.webview.1.5.4.js"></script>
	<script type="text/javascript">
		var vm;
		//$('.init-full').show();


		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				showPageType: false,
				ifConfirm: false,
				serverIP: 'http://' + FLD.serverIP,
				shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
				dataList: [],
				balance: FLD.getUserInfo().Balance

			},
			created: function() {
				this.getDataList();
			},
			methods: {
				getDataList() {
					var that = this;
					that.showLoading = true;
					FLD.ajax('sp_GetBalanceDetails', {}, function(res) {
						that.showLoading = false;
						that.dataList = res.ds;
					})
				},
				rechargeBalance() {
					var that = this;
					window.location.href = './rechargeBalance.html'
					// api.openWin({
					// 	name: 'rechargeBalance',
					// 	url: 'rechargeBalance.html',
					// 	reload: true,
					// 	slidBackEnabled: false
					// })
				},

				onClickLeft() {
					uni.navigateBack()
					// api.closeWin();
				}
			}
		})
	</script>

</html>